<template>
    <div class="page">
        <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left">
                    <a href="#" class="link back">
                        <i class="icon icon-back"></i>
                        <span class="ios-only">返回</span>
                    </a>
                </div>
                <div class="title">{{js 'return (this.$route.params.metername)'}} 详细</div>
            </div>
        </div>
        <div class="page-content">
            <div class="block block-strong">
                <!-- <p>{{js 'return (this.$route.params.metername)'}}</p> -->
                <div id="id-chart-tem" style="height:350px;">
                </div>
                <div id="id-chart-humi" style="height:350px;">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    return {
        on: {
            pageInit: function (e, page) {
                // do something on page init
                var self = this;
                //self.$app.dialog.alert('Hello world!');
                //console.info('history_detail.html Init');
                var params = this.$route.params;
                //this.$root.helloWorld(); // -> call alert
                //self.$app.dialog.alert(JSON.stringify(params));

                //echarts
                //保留小数点后指定位数的
                function formatFloat(src, pos) {
                    return Math.round(src * Math.pow(10, pos)) / Math.pow(10, pos);
                }

                var charttem = echarts.init(document.getElementById('id-chart-tem'));
                var charthumi = echarts.init(document.getElementById('id-chart-humi'));
                var charttemOption = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['温度(℃)']
                    },
                    toolbox: {
                        show: true,
                        top: 20,
                        bottom: 20,
                        right: 30,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {
                                readOnly: false
                            },
                            magicType: {
                                type: ['line', 'bar']
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} '
                        }
                    },
                    series: [{
                        name: '温度(℃)',
                        type: 'line',
                        data: [],
                        //areaStyle: {normal: {}},
                        itemStyle: {
                            normal: {
                                // 设置颜色
                                color: '#00a65a'
                            }
                        },
                        markPoint: {
                            data: [{
                                    type: 'max',
                                    name: '最大值'
                                },
                                {
                                    type: 'min',
                                    name: '最小值'
                                }
                            ]
                        },
                        markLine: {
                            data: [{
                                type: 'average',
                                name: '平均值'
                            }]
                        }
                    }]
                };
                var charthumiOption = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['湿度(%RH)']
                    },
                    toolbox: {
                        show: true,
                        top: 20,
                        right: 30,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {
                                readOnly: false
                            },
                            magicType: {
                                type: ['line', 'bar']
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} '
                        }
                    },
                    series: [{
                        name: '湿度(%RH)',
                        type: 'line',
                        data: [],
                        //areaStyle: {normal: {}},
                        itemStyle: {
                            normal: {
                                // 设置颜色
                                color: '#00a65a'
                            }
                        },
                        markPoint: {
                            data: [{
                                    type: 'max',
                                    name: '最大值'
                                },
                                {
                                    type: 'min',
                                    name: '最小值'
                                }
                            ],
                            symbolSize: 60
                        },
                        markLine: {
                            data: [{
                                type: 'average',
                                name: '平均值'
                            }]
                        }
                    }]
                };

                function load() {
                    charttem.showLoading();
                    charthumi.showLoading();
                    app.request({
                        async: true,
                        //url: '../../index.php/Home/TemHumiApp/loadtemData',
                        url: URL_HEADER+'loadtemData',
                        data: params,
                        dataType: 'json',
                        timeout: timeout,
                        success: function (data, status, xhr) {
                            var dataTime = [];
                            var datatem = [];
                            for (var i = data.length - 1; i >= 0; i--) {
                                if (data[i].di == '0000T' || data[i].di == 'F1') {
                                    datatem.push(formatFloat(data[i].value, 2));
                                    dataTime.push(data[i].readdate);
                                }
                            }

                            charttemOption.series[0].data = datatem;
                            charttemOption.xAxis.data = dataTime;
                            charttem.setOption(charttemOption);
                        },
                        error: function (xhr, status) {},
                        complete: function (xhr, status) {
                            charttem.hideLoading();
                        }
                    });

                    app.request({
                        async: true,
                        //url: '../../index.php/Home/TemHumiApp/loadhumiData',
                        url: URL_HEADER+'loadhumiData',
                        data: params,
                        dataType: 'json',
                        timeout: timeout,
                        success: function (data, status, xhr) {
                            var dataTime = [];
                            var datahumi = [];
                            for (var i = data.length - 1; i >= 0; i--) {
                                if (data[i].di == '0000H') {
                                    datahumi.push(formatFloat(data[i].value, 2));
                                    dataTime.push(data[i].readdate);
                                }
                            }

                            charthumiOption.series[0].data = datahumi;
                            charthumiOption.xAxis.data = dataTime;
                            charthumi.setOption(charthumiOption);
                        },
                        error: function (xhr, status) {},
                        complete: function (xhr, status) {
                            charthumi.hideLoading();
                        }
                    });
                }

                load();
                setInterval(function () {
                    //console.info('load data');
                    load();
                }, inteval);
            },
            pageAfterOut: function (e, page) {
                // page has left the view
            },
        },
        methods: {
            helloWorld: function () {
                var self = this;
                self.$app.dialog.alert('Hello world!');
            },
        }
    };
</script>